<template>
  <div class="analysis">
    <div class="analysis_top">
      <div class="analysis_top_text">叠加分析</div>
    </div>
    <div class="analysis_middle">
      <!-- <div class="analysis_middle_title">影响建筑面积统计</div> -->
      <div class="analysis_middle_button">
        <!-- <div
          class="analysis_middle_button_image"
          :class="boxBlockItem == 0 ? 'image_active' : ''"
        >
          <div
            class="analysis_middle_content"
            @click="box_blockClick(0)"
            :style="{
              background:
                boxBlockItem == 0
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="analysis_middle_content_top">建筑面积统计</div>
            <div class="analysis_middle_content_bottom">
              8888888m²
            </div>
          </div>
        </div> -->
        <div
          class="analysis_middle_button_image"
          :class="boxBlockItem == 1 ? 'image_active' : ''"
        >
          <div
            class="analysis_middle_content"
            @click="box_blockClick(1)"
            v-if="AreaData"
          >
            <div class="analysis_middle_content_top">面积统计</div>
            <div class="analysis_middle_content_bottom">
              <!-- {{ areaDatas ? areaDatas : "暂无数据" }}{{ unit | filterUnit() }} -->
              {{ AreaData.ha }} 公顷 (合 {{ AreaData.mu }} 亩)
            </div>
          </div>
          <div v-else class="analysis_middle_content">
            <div class="analysis_middle_content_top">该图层暂无面积统计</div>

          </div>
        </div>
      </div>
    </div>
    <!-- <div class="analysis_bottom">
      <div id="qstViews" style="width: 460px; height: 160px"></div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      boxBlockItem: 0,

      // 换算单位
      units: "",

      // 获取到占地面积的值
      areaDatas: "",

      // 保存林地的总面积
      lindiArea: 0,
      // 保存土地的总面积
      tudiArea: 0,

      option: {
        // 中间的文字
        // 可以在echarts中的任意地方加上文字、图片、水印等。

        color: ["#FFBF3C", "#57A7FF"],
        // legend: {
        //   orient: "vertical",
        //   x: "54%",
        //   y: "21%",
        //   align: "left",
        //   itemGap: 26, //设置间距
        //   itemWidth: 8, //图标的宽
        //   itemHeight: 8, //图标的高
        //   textStyle: {
        //     fontSize: 16,
        //     color: "#fff",
        //     fontWeight: 400,
        //   },
        //   icon: "circle",
        //   // 显示右侧数据
        //   formatter: function(name) {
        //     var index = 0;
        //     var clientlabels = ["普通", "即时", "紧急"];
        //     var clientcounts = ["25", "15", "60"];
        //     var clientcounts2 = ["25%", "15%", "60%"];
        //     clientlabels.forEach(function(value, i) {
        //       if (value == name) {
        //         index = i;
        //       }
        //     });
        //     return `${name}   ${clientcounts[index]}   ${clientcounts2[index]}`;
        //   },
        // },
        series: [
          {
            type: "pie",
            radius: ["40%", "55%"],
            center: ["45%", "45%"],
            data: [
              {
                value: 30,
                name: "林地利用面积",
                label: { color: "#ffffff", fontSize: 14 },
              },
              {
                value: 70,
                name: "土地利用面积",
                label: { color: "#ffffff", fontSize: 14 },
              },
            ],
            // label: {
            //   show: true,
            //   formatter: function(d) {
            //     return d.percent.toFixed(0) + "%" + "\n";
            //   },
            //   //  textStyle: {
            //   //   fontSize: 13,
            //   //  },
            //   textBorderColor: "none",
            // //   emphasis: {
            // //     show: true,
            // //     label:{
            // //         show:true,
            // //     },
            // //     labelLine:{
            // //         show:true,
            // //         lineStyle:{
            // //             width: 2,
            // //             type: 'solid',
            // //             color:'red'
            // //         }
            // //     },
            // //   },
            //   padding: [0, -10],
            // },
            // labelLine: {
            //   normal: {
            //     show: true,
            //     length: 5,
            //     length2: 20,
            //   },
            //   showAbove: false,
            //   emphasis: {
            //     show: false,
            //   },
            // },

            label: {
              show: true,
              normal: {
                position: "outside",
                fontSize: 14,
                lineHeight: 18, //当有两行字时可调整上下行的间距
                formatter: (params) => {
                  //   return params.name + ":\n" + +params.value + "亿元";
                  return params.name + ":\n" + params.value + " " + this.units;
                },
              },
            },
            // 标签线的长度
            labelLine: {
              show: true,
              length: 10,
              smooth: true,
              showAbove: true,
              emphasis: {
                show: true,
              },
              lineStyle: {
                //标签线的颜色
                color: "#ffffff",
              },
            },
          },
          {
            name: "外边框",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["45%", "45%"],
            radius: ["62%", "62%"],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                name: "",
                itemStyle: {
                  borderWidth: 1,
                  borderColor: "#BADCFF5C",
                  borderType: "dashed",
                },
              },
            ],
          },
          {
            name: "内边框",
            type: "pie",
            radius: ["24%", "36%"],
            center: ["45%", "45%"],
            hoverAnimation: false, //鼠标移入移出均不放大
            itemStyle: {
              // normal: {
              //  color: function (params) {
              //   //自定义颜色
              //   var colorList = ["rgba(186, 220, 255, 0.36)"];
              //   return colorList[params.dataIndex];
              //  },
              // },
              normal: { color: "rgba(75, 223, 219, 0.08)" },
              emphasis: {
                color: "rgba(75, 223, 219, 0.08)",
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 1,
                name: "",
              },
            ],
            // data: [
            //  {
            //   value: 60,
            //   name: "剩余",
            //   label: { color: "#F8474E", fontSize: 20 },
            //  },
            //  {
            //   value: 100,
            //   name: "总数",
            //   label: { color: "#4BDEDA", fontSize: 20 },
            //  },
            // ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("Sjsx", ["AreaData", "unit", "ResultData", "TDresulrData"]),
  },
  mounted() {
    // this.getEcharts();
    // this.changeUnit();
    // this.changePie();
    this.changeData();
  },
  methods: {
    // 判断选中了哪个盒子
    box_blockClick(val) {
      this.boxBlockItem = val;
    },

    getEcharts() {
      var chart = echarts.init(document.getElementById("qstViews"));
      chart.setOption(this.option);
    },

    // 改变数的小数点
    changeData() {
      this.AreaData.ha = this.AreaData.ha.toFixed(3);
      this.AreaData.mu = this.AreaData.mu.toFixed(2);
    },
  },

  // // 改变单位，改变值
  // changeUnit() {
  //   // console.log(this.AreaData,"AreaData的值");
  //   // console.log(this.unit,"unit的值");
  //   if (this.unit == "m²") {
  //     this.areaDatas = this.AreaData.m2; //改变值
  //     this.units = '平方米'  //改变单位
  //   } else if (this.unit == "ha") {
  //     this.areaDatas = this.AreaData.ha;
  //     this.units = '公顷'
  //   } else if (this.unit == "mu") {
  //     this.areaDatas = this.AreaData.mu;
  //     this.units = '亩'
  //   }
  // },

  // //改变饼状图数据
  // changePie() {
  //   console.log(this.ResultData, "analysis-ResultData"); //林地
  //   console.log(this.TDresulrData, "analysis-TDresulrData"); //土地
  //   this.ResultData.forEach((item) => {
  //     if (this.unit == "m²") {
  //       this.lindiArea += Number(item.m2);
  //     } else if (this.unit == "ha") {
  //       this.lindiArea += Number(item.ha);
  //     } else if (this.unit == "mu") {
  //       this.lindiArea += Number(item.mu);
  //     }
  //   });
  //   this.TDresulrData.forEach((item) => {
  //     if (this.unit == "m²") {
  //       this.tudiArea += Number(item.m2);
  //     } else if (this.unit == "ha") {
  //       this.tudiArea += Number(item.ha);
  //     } else if (this.unit == "mu") {
  //       this.tudiArea += Number(item.mu);
  //     }
  //   });

  //   this.option.series[0].data[0].value = this.lindiArea.toFixed(2);
  //   this.option.series[0].data[1].value = this.tudiArea.toFixed(2);
  //   console.log(
  //     this.option.series[0].data[0].value,
  //     this.option.series[0].data[1].value,
  //     "林地土地总面积"
  //   );
  //   this.getEcharts();
  // },

  // filters:{
  //   filterUnit(val){
  //     if (val == 'ha'){
  //       return ' 公顷'
  //     }else if (val == 'mu'){
  //       return ' 亩'
  //     }else if (val == 'm²'){
  //       return ' 平方米'
  //     }
  //   }
  // },
  // watch:{
  //   AreaData:{
  //     handler(newval){
  //       console.log(newval,"面积的值");

  //     }
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.analysis {
  height: 160px;
  .analysis_top {
    background: url("../../../../../assets/images/home/top.png");
    width: 440px;
    background-size: cover;
    .analysis_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      /* identical to box height */
      color: #ffffff;
    }
  }
  .analysis_middle {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    margin-top: 10px;
    .analysis_middle_title {
    }
    .analysis_middle_button {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      width: 420px;
      .image_active {
        background: url("../../../../../assets/images/home/jianzhuBox.png");
        background-size: 100% 100%;
      }
      .analysis_middle_button_image {
        width: 430px;
        height: 100px;
        // background-repeat: no-repeat;
        .analysis_middle_content {
          width: 430px;
          height: 100px;
          background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
          // opacity: 0.6;
          display: flex;
          flex-direction: column;
          // align-items: center;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          cursor: pointer;
          .analysis_middle_content_top {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 21px;
            // color: rgba(255, 255, 255, 1);
            color: #ffffff;
            // padding-left: 20px;
          }
          .analysis_middle_content_bottom {
            padding-top: 10px;
            font-family: HuXiaoBo-NanShen;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 19px;
            /* identical to box height */
            color: #83fae5;
            // padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
